<template>
<div class="bg">
  <!-- 倒计时部分 Begin-->
  <div class="title1" v-show="showDjs">
    <img src="../assets/images/djs_04.png">
  </div>
  <div class="count-down" v-show="showDjs">
      <span class="num">{{h1}}</span>
      <span class="num">{{h2}}</span>
      <span class="text">时</span>
      <span class="num">{{m1}}</span>
      <span class="num">{{m2}}</span>
      <span class="text">分</span>
      <span class="num">{{s1}}</span>
      <span class="num">{{s2}}</span>
      <span class="text">秒</span>
  </div>
  <div v-show="showDjs">
    <div id="qrcode" ref="qrcode"></div>
  </div>
 <!--  <div v-show="showStart">
    <img src="../assets/images/start.png" class="start" @click="start">
    <img class="wx" src="../assets/images/djs_03.png">
    <img class="prize" src="../assets/images/djs_05.png">
  </div> -->
  <div>
    <img class="qq1 animated infinite qqanimate" src="../assets/images/qq1.png" v-show="showQq">
    <img class="qq2 animated infinite qqanimate delay" src="../assets/images/qq2.png" v-show="showQq">
    <img class="qq3 animated infinite qqanimate" src="../assets/images/qq3.png" v-show="showQq">
    <img class="qq4 animated infinite qqanimate" src="../assets/images/qq2.png" v-show="showQq">
  </div>
  <!-- 倒计时部分End -->
  <!-- 中奖者部分 Begin -->
 <!--  <div class="title2" v-show="showZj">
    <img src="../assets/images/zjz_01.png">
  </div> -->
  <!-- 列表 -->
  <div v-show="showZj">
    <!-- <div class="list">
      <div v-for="(item, index) in rank" :value="item" :key="index" class="container">
        <h3 class="prize-name">{{prizeObj[''+index]}}</h3>
        <div class="list-box">
           <p class="content" v-for="(item1,index1) in item" :value="item1" :key="index1">
             <img class="head-s" :src="item1.headimgurl">
             <span class="phone">{{handleTel(item1.phone)}}</span>
             <span class="des">{{item1.award_title}}</span>
           </p>
         </div>
      </div>
    </div> -->
    <!-- 大头像 -->
    <div class="big-head">
      <div class="head">
        <img src="../assets/images/zj_bg.png"  class="head1">
        <img :src="head" class="head2">
        <img src="../assets/images/zj_01.png"  class="head3">
        <p class="first-prize">{{firstPrize}}</p>
      </div>
      <div class="tel">{{phone}}</div>
      <!-- 左右彩带 -->
      <div class="cd">
        <img class="cd-l" src="../assets/images/cd_01.png">
        <img class="cd-r" src="../assets/images/cd_02.png">
        <img class="cq" src="../assets/images/cq_01.png">
      </div>
    </div>
  </div>
  <!-- 中奖部分End -->
  <!-- 中奖名单滚动显示Begin -->
  <div v-show="showPrizeList">
    <div class="sy-time">
      <span>剩余时间:</span>
      <span>{{openLength}}</span>
    </div>
    <div id="box">
      <ul id="con" ref="con" :class="{anim:animate==true}">
        <li v-for='(item,index) in prizeLists' :key="index">
          <span>
           <img class="list-h" :src="item.headimgurl">
          </span>
           <span class="list-p">{{handleTel(item.phone)}}</span>
           <span class="list-d">{{item.award_title}}</span>
        </li>
      </ul>
    </div>
  </div>
  <!-- 中奖名单滚动显示End -->
  <div class="qq-box" ref="qqbox" v-if="showQqBox"></div>
  <div class="four-second" v-show="showFourDown">{{count}}</div>
</div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
  name: 'app',
  data () {
    return {
      head: '',
      firstPrize: '',
      phone: '',
      animate: false,
      // 活动持续时间
      openLength: 0,
      // 奖品名单列表
      prizeLists: [],
      showQq: false,
      showDjs: false,
      showZj: false,
      // 显示最开始的图片
      // prizeObj: {
      //   '1': '一等奖',
      //   '2': '二等奖',
      //   '3': '三等奖'
      // },
      showStart: false,
      showPrizeList: false,
      activityGuid: '',
      index: 0,
      h1: 0,
      h2: 0,
      m1: 0,
      m2: 0,
      s1: 0,
      s2: 0,
      time: 5,
      rank: {},
      startTime: '',
      qiqiu1: require('../assets/images/qq1.png'),
      qiqiu2: require('../assets/images/qq2.png'),
      qiqiu3: require('../assets/images/qq3.png'),
      qqTimer: '',
      activeTimer: '',
      showQqBox: true,
      hasOpenLength: true,
      setTimeAsk: '',
      count: 4,
      showFourDown: false
    }
  },
  mounted () {
    // 定时请求
    this.opens()
    this.setTimeGetActiveInfo()
    this.init()
  },
  methods: {
    // 请求获取最新的时间进行比较
    setTimeToAsk () {
      this.setTimeAsk = setInterval(() => {
        var time = 1000 * 60 * 10
        var now = new Date().getTime()
        var startTime = new Date(this.startTime).getTime()
        // 应该是开始前的10分钟之前显示倒计时
        // 所以要用开始的时间减去10分钟
        startTime = startTime - time
        console.log(now)
        console.log(startTime)
        console.log(now - startTime)
        if (now - startTime <= time && now >= startTime) {
          // this.time = Math.floor((time - (now - startTime)) / 1000)
          this.time = Math.floor((time - (now - startTime)) / 1000)
          // 当前时间
          console.log(this.time)
          // 时间到了活动开始的前10分钟开始显示倒计时
          // console.log('倒计时')
          clearInterval(this.activeTimer)
          clearInterval(this.qqTimer)
          this.showQqBox = false
          this.showQq = true
          // 定时请求，满足时间开启倒计时
          this.showDjs = true
          this.downTime()
        }
      }, 1000)
    },
    // 获取最近的抽奖活动
    opens () {
      this.$http({
        method: 'post',
        url: this.$config.baseUrl + '/api/stampactivity/opens'
      }).then(res => {
        // alert(res.data.activity_guid)
        this.activityGuid = res.data.activity_guid
        this.$refs.qrcode.innerHTML = ''
        this.qrcode('qrcode')
        this.openLength = res.data.open_length
        if (this.hasOpenLength) {
          this.hasOpenLength = false
          this.setTimeToAsk()
        }
        this.startTime = res.data.start_time
      })
    },
    setTimeGetActiveInfo () {
      this.activeTimer = setInterval(() => {
        this.opens()
      }, 10000)
    },
    // 获取活动概况
    awards () {
      this.$http({
        method: 'post',
        url: this.$config.baseUrl + '/api/stampactivity/awards',
        data: {
          activity_guid: this.activityGuid
        }
      }).then(res => {
        // this.setTimeGetActiveInfo()
        // this.hasOpenLength = true
        // console.log(res)
        // alert(1111111)
        // console.log(top)
        if (+res.status === 1) {
          setTimeout(() => {
            window.location.reload()
          }, 2 * 60 * 1000)
          // 屏幕旁边的列表
          if (res.data.top) {
            this.showZj = true
            this.rank = res.data.rank
            // 屏幕中心的大头像
            this.phone = this.handleTel(res.data.top.phone)
            this.head = res.data.top.headimgurl
            this.firstPrize = res.data.top.award_level_name
          } else {
            this.showZj = false
          }
        } else {
          console.log('错误')
        }
      })
    },
    // 进行大屏幕倒计时
    downTime () {
      var h = Math.floor(this.time / 3600)
      var m = Math.floor(this.time % 3600 / 60)
      var s = this.time % 60
      // 设置时间
      this.h1 = Math.floor(h / 10)
      this.h2 = h % 10
      this.m1 = Math.floor(m / 10)
      this.m2 = m % 10
      this.s1 = Math.floor(s / 10)
      this.s2 = s % 10
      if (this.time === 0) {
        // this.showStart = true
        // 隐藏倒计时页面
        this.showDjs = false
        // 倒计时结束 显示开始抽奖的页面  showStart
        // 在这个地方在设置一个4s的倒计时，然后再去调开始的接口
        this.showFourDown = true
        var timer = setInterval(() => {
          this.count--
          if (this.count === 0) {
            clearInterval(timer)
            this.showFourDown = false
            this.starts()
          }
        }, 1000)
        // this.starts()
      }
    },
    // 剩余时间倒计时 openlength没问题就没问题
    lastTimeDown () {
      // 获取持续的时间
      var timer = setInterval(() => {
        // 定时获取奖品名单列表显示
        this.getAwardLists(res => {
          this.prizeLists = res
        })
        this.openLength--
        if (this.openLength === 0) {
          // 倒计时结束 清除定时器
          clearInterval(timer)
          // 最后的页面隐藏气球
          this.showQq = false
          // 隐藏掉奖品列表名单
          this.showPrizeList = false
          // 此时显示最后的中奖结果
          this.awards()
        }
      }, 1000)
    },
    // 活动开启
    starts () {
      this.$http({
        method: 'post',
        url: this.$config.baseUrl + '/api/stampactivity/starts',
        data: {
          activity_guid: this.activityGuid
        }
      }).then(res => {
        console.log(res)
        if (res.status === 0) {
          setTimeout(() => {
            this.starts()
          }, 1000)
        } else {
          // 点击开始按钮 ，此时显示奖品列表
          this.showPrizeList = true
          // 出现最后的倒计时
          this.lastTimeDown()
        }
      })
    },
    // 获取中奖名单列表
    getAwardLists (cb) {
      this.$http({
        method: 'post',
        url: this.$config.baseUrl + '/api/stampactivity/award_lists',
        data: {
          activity_guid: this.activityGuid
        }
      }).then(res => {
        console.log(res)
        cb(res.data)
      })
    },
    // 生成二维码
    qrcode (code) {
      var text = 'http://open1.ufunet.cn/pages/h5/2018/0425yongzou/app/#/?activityGuid=' + this.activityGuid
      let qrcode = new QRCode(code, {
        text: text,
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    // 对电话号码进行处理
    handleTel (tel) {
      return tel.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3')
    },
    init () {
      if (this.qqTimer) {
        clearInterval(this.qqTimer)
      }
      this.qqTimer = setInterval(() => {
        this.$refs.qqbox.appendChild(this.createBalloon())
      }, 800)
    },
    // 创建气球
    createBalloon () {
      var oImg = document.createElement('img')
      var duration = this.durationValue(this.randomInteger(4, 8))
      var imgArr = [this.qiqiu1, this.qiqiu2, this.qiqiu3]
      var index = this.randomInteger(0, 3)
      var delay = this.durationValue(this.randomFloat(0, 0.1))
      oImg.src = imgArr[index]
      oImg.style.width = this.prixelValue(this.randomFloat(100, 300))
      oImg.style.zIndex = 10
      oImg.style.position = 'absolute'
      oImg.style.left = this.prixelValue(this.randomInteger(100, 1820))
      oImg.style.top = this.prixelValue(1080)
      oImg.setAttribute('class', 'balloon')
      oImg.addEventListener('animationend', this.endAnimation)
      oImg.style.animationName = Math.random() < 0.5 ? 'downToUpLeft' : 'downToUpRight'
      oImg.style.animationDuration = duration
      oImg.style.animationDelay = delay
      oImg.style.animationIterationCount = '1'
      oImg.style.animationTimingFunction = 'linear'
      return oImg
    },
    // 获取随机数
    randomInteger: function (min, max) {
      return min + Math.floor(Math.random() * (max - min))
    },
    randomFloat: function (min, max) {
      return min + Math.random() * (max - min)
    },
    prixelValue: function (value) {
      return value / 100 + 'rem'
    },
    durationValue: function (value) {
      return value + 's'
    },
    endAnimation (e) {
      if (this.$refs.qqbox) {
        this.$refs.qqbox.removeChild(e.target)
      }
      console.log('结束了')
    }
  },
  created () {
  }
}
</script>

<style lang="scss">
@import "../assets/css/color.scss";
@import "../assets/css/mixins.scss";
@import "../assets/css/animate.scss";
.bg{
  position:relative;
  @include bgc('../assets/images/bg.jpg');
/*倒计时部分 Begin*/
  .title1{
    @include pssc(180);
    @include size(740,104);
    img{
      width:100%;
    }
  }
  .count-down{
    @include pssc(345);
    @include size(845,125);
    text-align:center;
    line-height:p2r(115);
    border-radius:p2r(25);
    background:$yellow;
    span{
      display:inline-block;
      @include size(60,100);
      vertical-align:middle;
      font-weight:bold;
    }
    .num{
      @include mt(11);
      padding:0 p2r(5);
      font-size:p2r(100);
      color:$white;
      background:$textBgColor;
    }
    .text{
      margin:0 p2r(15);
      font-size:p2r(66);
      color:$textColor;
    }
  }
  #qrcode{
    z-index:99999;
    img{
      display:block;
      @include pssc(500);
      @include size(300,300);
    }
    // img:nth-child(2){
    //   position:absolute;
    //   left:13%;
    //   top:20%;
    // }
    // img:nth-child(4){
    //   position:absolute;
    //   right:13%;
    //   top:20%;
    // }
   }
    .start{
      @include psc();
      @include size(391,391);
    }
    .wx{
      z-index:-1;
      @include pstl(578,465);
      @include size(346,317);
    }
    .prize{
      z-index:-1;
      @include pstr(520,345);
      @include size(626,381);
    }
   .qq1{
     z-index:-1;
     @include pstl(260,0);
     @include size(244,317);
     }
    .qq2{
     z-index:-1;
     @include pstl(480,250);
     @include size(155,207);
    }
     .qq3{
     z-index:-1;
     @include pstr(209,205);
     @include size(264,348);
    }
    .qq4{
      z-index:-1;
     @include pstr(480,450);
     @include size(155,207);
    }
/*倒计时部分 End*/
/*中奖者部分 Begin*/
  /*列表*/
  .list{
      @include pstl(230,101);
      width:p2r(398);
    .container{
       .prize-name{
        padding-left:p2r(22);
        line-height:0;
        font-size:p2r(25);
        color:$white;
         .count{
           @include ml(20);
          }
        }
        .list-box{
          padding:p2r(2) 0;
          background:$yellow;
          border-radius:p2r(20);
          .content{
            margin:p2r(3) 0;
            color:$purple;
            text-align:center;
            font-size:p2r(20);
            font-weight:bold;
            letter-spacing:p2r(5);
             white-space:nowrap;
            .head-s{
              @include size(42,42);
              border-radius:50%;
              vertical-align:middle;
             }
              .phone{
               @include ml(20);
               @include mr(10);
             }
         }
       }
     }
  }
   /*大头像*/
   .title2{
    @include pssc(103);
    @include size(740,111);
    img{
      width:100%;
    }
  }
  .big-head{
    @include pssc(230);
    @include size(465,490);
    .head{
      .head1{
        @include psc();
        @include size(329,244);
      }
      .head2{
        @include psc();
        @include size(220,220);
        border-radius:50%;
      }
      .head3{
        @include pstl(55,143);
        @include size(181,104);
      }
      .first-prize{
        @include pssc(265);
        @include size(250,45);
        line-height:p2r(45);
        text-align:center;
        color:$white;
        font-size:p2r(25);
        background:$pink;
      }
    }
    .tel{
      @include pssc(405);
      @include size(250,50);
      line-height:p2r(55);
      font-size:p2r(28);
      font-weight:bold;
      text-align:center;
      letter-spacing:p2r(5);
      border-radius:p2r(20);
      color:$purple;
      background:$yellow;
    }
   .cd{
    .cd-l{
      z-index:-1;
      @include pstl(-30,-260);
      @include size(377,361);
    }
    .cd-r{
      @include pstr(-30,-260);
      @include size(377,361);
    }
    .cq{
      @include pstr(440,-450);
      @include size(442,242);
    }
   }
  }
/*中奖者部分 End*/
/*中奖名单列表Begin*/
  .sy-time{
    display:flex;
    justify-content:space-between;
    @include size(1200,100);
    margin: 0 auto;
    line-height:p2r(100);
    color:$yellow;
    // border-bottom:p2r(3) solid $themeColor;
    span:first-child{
    font-size:p2r(40);
    }
    span:last-child{
     font-size:p2r(50);
     letter-spacing:p2r(5);
    }
  }
  #box{
  @include size(1200,800);
  margin:0 auto;
  border: 1px solid white;
  overflow: hidden;
  transition: all 0.5s;
}
.anim{
  transition: all 0.5s;
}
#con li{
  display:flex;
  justify-content:space-around;
  height: p2r(80);
  line-height: p2r(80);
  color:$purple;
  letter-spacing:p2r(5);
  border-bottom:p2r(1) solid $yellow;
  background:$deepYellow;
  box-sizing:border-box;
  span{
    width:33.33%;
    text-align:center;
  }
  .list-h{
    @include size(80,80);
    border-radius:50%;
    vertical-align:middle;
  }
  .list-p{

  }
  .list-d{

  }
}
/*中奖名单列表End*/
.qq-box{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
.four-second{
  @include psc();
  @include size(573,573);
  text-align:center;
  line-height:p2r(573);
  font-size:p2r(300);
  color:$white;
  @include bgc('../assets/images/circle.png');
}
}
</style>
